<template>
    <vue-simplebar>
        <div class="max-w-screen-lg mx-auto">
            <div class="page-container">
                <div class="page-filter-option">
                    <el-form :inline="true" :model="filterOption" class="flex flex-wrap">
                        <el-form-item>
                            <el-input :placeholder="$t('form.inputPlaceholder')" suffix-icon="el-icon-search" class="input-search-select"
                                      v-model="filterOption.keyword" @change="getDataList" clearable>
                                <el-select slot="prepend" v-model="filterOption.keyword_column">
                                    <el-option label="UID" value="uid"></el-option>
                                    <el-option :label="$t('game.user.account_id')" value="account_id"></el-option>
                                </el-select>
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <component-page-org-tree-option v-model="filterOption.plat_code" @change="getDataList"></component-page-org-tree-option>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="getDataList">{{ $t('action.search') }}</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="page-container-inner mt-3" v-loading="loading">
                    <h4 class="text-lg p-1 pb-0">{{ $t('system.tools.fish-fire.balance') }}</h4>
                    <div class="h-80">
                        <component-page-echarts ref="chartBalance"></component-page-echarts>
                    </div>
                </div>
                <div class="page-container-inner mt-3" v-loading="loading">
                    <h4 class="text-lg p-1 pb-0">{{ $t('system.tools.fish-fire.game_rtp') }}</h4>
                    <div class="h-80">
                        <component-page-echarts ref="chartGameRtp"></component-page-echarts>
                    </div>
                </div>
                <div class="page-container-inner mt-3" v-loading="loading">
                    <h4 class="text-lg p-1 pb-0">{{ $t('system.tools.fish-fire.player_rtp') }}</h4>
                    <div class="h-80">
                        <component-page-echarts ref="chartPlayerRtp"></component-page-echarts>
                    </div>
                </div>
                <div class="page-container-inner mt-3" v-loading="loading">
                    <h4 class="text-lg p-1 pb-0">{{ $t('system.tools.fish-fire.heartbeat_revise') }}</h4>
                    <div class="h-80">
                        <component-page-echarts ref="chartHeartbeatRevise"></component-page-echarts>
                    </div>
                </div>
                <div class="page-container-inner mt-3" v-loading="loading">
                    <h4 class="text-lg p-1 pb-0">{{ $t('system.tools.fish-fire.period_rtp_revise') }}</h4>
                    <div class="h-80">
                        <component-page-echarts ref="chartPeriodRtpRevise"></component-page-echarts>
                    </div>
                </div>
                <div class="page-container-inner mt-3" v-loading="loading">
                    <h4 class="text-lg p-1 pb-0">{{ $t('system.tools.fish-fire.protect_revise') }}</h4>
                    <div class="h-80">
                        <component-page-echarts ref="chartProtectRevise"></component-page-echarts>
                    </div>
                </div>
            </div>
        </div>
    </vue-simplebar>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            filterOption: {
                plat_code: '',
                keyword: '',
                keyword_column: 'account_id',
                page: 1,
                page_size: 100,
                order: 'desc',
                order_key: 'descending',
                order_column: 'created',
            },
            data: {},
        }
    },
    created() {
        this.getDataList();
    },
    methods: {
        getDataList() {
            this.loading = true;
            axios.get('/system/tools/fish/getFire', {
                params: this.filterOption
            }).then((response) => {
                if (response.data.resp_msg.code == 200) {
                    this.data = response.data.resp_data;
                    // 玩家余额
                    this.initChart(_.map(this.data, 'balance'), 'chartBalance');
                    // 游戏rtp
                    this.initChart(_.map(this.data, 'game_rtp'), 'chartGameRtp');
                    // 玩家rtp
                    this.initChart(_.map(this.data, 'player_rtp'), 'chartPlayerRtp');
                    // 开火心跳修正系数
                    this.initChart(_.map(this.data, 'heartbeat_revise'), 'chartHeartbeatRevise');
                    // 游戏周期rtp修正系数
                    this.initChart(_.map(this.data, 'period_rtp_revise'), 'chartPeriodRtpRevise');
                    // 玩家保底修正系数
                    this.initChart(_.map(this.data, 'protect_revise'), 'chartProtectRevise');
                } else {
                    this.$message({
                        type: 'error',
                        message: response.data.resp_msg.message,
                        showClose: true
                    });
                }
                this.loading = false;
            })
        },
        initChart(data, chart) {
            let option = {
                color: ["#d48265"],
                tooltip: {
                    trigger: 'axis',
                },
                grid: {
                    top: 40,
                    right: 40,
                    bottom: 40,
                    left: 80,
                },
                xAxis: {
                    show: true,
                    boundaryGap: false,
                    data: Object.keys(data)
                },
                yAxis: {
                    show: true,
                    axisLine: {show: false},
                    axisTick: {show: false},
                },
                series: [{
                    type: 'line',
                    data: data.map(item => this.$store.getters['config/filterNumeral'](item))
                }]
            };
            // 渲染图表
            this.$refs[chart].setOption(option);
        },
    }
}
</script>

<style lang="scss" scoped>

</style>
